<template>
  <a-card style="margin: 0px 0 10px 0">
    <div class="card-header"><span class="border"></span>商品信息</div>
    <div class="card-body">
      <a-table
        ref="table"
        size="middle"
        bordered
        :rowKey="row=>row.id"
        :columns="columns"
        :dataSource="goodsInfoModel.goodInfos"
        :pagination="false"
        :loading="loading"
        :scroll="{ y: 270 }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <template slot="goodInfoSlot" slot-scope="text, record">
          <div class="good-info">
            <div>
              <img :src="record.picturePath ? record.picturePath : emptyImg" width="50px" height="60px" />
            </div>
            <div style="margin-left: 5px; text-align: left">
              <div>
                <a>
                  <a-tooltip :title="record.goodsName">
                    <div class="goods-name" @click="goodsNameClick(record.goodsLink)">
                      <a>{{ record.goodsName }}</a>
                    </div>
                  </a-tooltip>
                </a>
              </div>
              <div>SKU：{{record.sku}}</div>
              <div>促销码：{{record.promotionIds}}</div>
            </div>
          </div>
        </template>
        <!-- 单价 -->
        <template slot="priceSlot" slot-scope="text, record">
           <div>{{calculateUnitPrice(record.price,record.quantity)}}</div>
           <div>(含税：{{record.currencyCode}} &nbsp; {{record.goodsTax}})</div>
        </template>
        <!-- 运费 -->
        <template slot="shippingPriceSlot" slot-scope="text, record">
           <div>{{record.shippingPrice ? record.shippingPrice : 0}}</div>
           <div v-if="record.shippingTax">(含税：{{record.currencyCode}} &nbsp; {{record.shippingTax}})</div>
        </template>
      </a-table>
      <a-row>
        <a-col class="card-bottom" :span="18">
          <div><label>发货仓库：</label><span>{{goodsInfoModel.deliveryWarehouse}}</span> </div>
          <div><label>配送标准：</label><span>{{goodsInfoModel.deliveryStandards}}</span> </div>
          <div>
            <label>最晚发货:</label>
            <span v-if="goodsInfoModel.latestShipDate && goodsInfoModel.deliveryWay === 'MFN'">
              <span style="color: #f64000; margin-right: 4px" v-if="calculateTimeOutShipDate(goodsInfoModel)">{{calculateTimeOutShipDate(goodsInfoModel)}}</span>
              <span v-else> -- </span>
              <span>({{ goodsInfoModel.latestShipDate ? goodsInfoModel.latestShipDate.slice(0, 16) : '' }})</span>
            </span>
          </div>
          <div>
            <label>最晚交付:</label>
            <span v-if="goodsInfoModel.latestDeliveryDate"> -- ({{goodsInfoModel.latestDeliveryDate.slice(0, 16)}})</span>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>
<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'
export default {
  name: 'commodityInfo', //商品信息
  mixins: [JeecgListMixin, mixinDevice],
  props: {
    goodInfos: {
      type: Object,
      default: () => {
        return {
          goodInfos: [],
        }
      },
    },
  },
  data() {
    return {
      disableMixinCreated: true,
      emptyImg: require('@/assets/oms/emptyImg.png'),
      columns: [
        {
          title: 'ASIN',
          align: 'center',
          dataIndex: 'asin',
        },
        {
          title: '商品信息',
          align: 'center',
          dataIndex: 'goodInfo',
          width: 400,
          scopedSlots: { customRender: 'goodInfoSlot' },
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'quantity',
        },
        {
          title: '发货数量',
          align: 'center',
          dataIndex: 'shipmentQuantity',
        },
        {
          title: '单价',
          align: 'center',
          dataIndex: 'price',
          scopedSlots: { customRender: 'priceSlot' },
        },
        {
          title: '运费',
          align: 'center',
          dataIndex: 'shippingPrice',
          scopedSlots: { customRender: 'shippingPriceSlot' },
        },
      ],
    }
  },
  computed: {
    goodsInfoModel() {
      return this.goodInfos
    },
  },
  methods:{
    moment,
    //计算单价
    calculateUnitPrice(price,quantity){
      return price ? (price / quantity).toFixed(2) : 0
    },
      //计算最晚发货超时时间
    //有发货时间，发货时间与最晚发货时间计算,没有发货时间，当前系统时间与最晚发货时间计算
    calculateTimeOutShipDate(record) {
      if (record.latestShipDate) {
        //有发货时间， 最晚发货时间小于发货时间  
        if(record.lastUpdateDate && moment(record.lastUpdateDate).isAfter(moment(record.latestShipDate))){
          return this.calculateTime(record.latestShipDate,record.lastUpdateDate)
        } 
        //当前时间与最晚返货时间
        if(moment().isAfter(moment(record.latestShipDate))){
         return this.calculateTime(record.latestShipDate,null)
        }else{
          return false
        } 
      }else{
        return false
      }
    },
    //计算时间
    calculateTime(startTime,endTime){
      const startDate = moment(startTime)
      const endDate = endTime ? moment(endTime) :moment()
      // 计算相差的天数
    const days = endDate.diff(startDate, 'days');
       // 计算去掉天数后剩余的小时数
    const remainingHours = endDate.clone().subtract(days, 'days').diff(startDate, 'hours');
     // 计算去掉天数和小时数后剩余的分钟数
    const remainingMinutes = endDate.clone().subtract(days, 'days').subtract(remainingHours, 'hours').diff(startDate, 'minutes');
    return `[超时]${days}天${remainingHours}时${remainingMinutes}分`
    },
    //点击商品名称跳转
    goodsNameClick(link){
      if(link){
        window.open(link)
      }
    },
  },

}
</script>
<style lang="less" scoped>
/deep/.ant-card-body {
  padding: 10px 0;
  box-shadow: 0 0 3px 3px #e5e5e5;
}
.card-header {
  font-size: 16px;
  margin-bottom: 10px;
  span {
    padding: 4px 2px;
    background: #1890ff;
    margin-right: 6px;
  }
}
.card-body {
  padding: 0 15px;
  span {
    margin-right: 6px;
  }
}
.good-info {
  display: flex;
}
.card-bottom {
  margin: 10px 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    margin-right: 20px;
  }
}
.goods-name{
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}
</style>